<template>
	<div class="box">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>数据统计</el-breadcrumb-item>
			<el-breadcrumb-item>数据报表</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="chartBox">
			<div class="chart" ref="chart"></div>
		</div>
	</div>
	
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data(){
			return {
				dataList:[],
				list:[],
				last:[],
				lest:[]
			}
		},
		name: "VueEditView",
		async mounted() {
			let res = await this.$http.getreports();
			this.dataList = res
			// console.log(this.dataList);
			let chartbox = this.$refs.chart
			this.list=res.data.data.legend.data;
			this.last=res.data.data.xAxis[0].data;
			this.lest=res.data.data.series;
			// 1、初始化图表
			let chart = echarts.init(chartbox)
			let option = {
				title: {
					text: '用户来源'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
					type: 'cross',
						label: {
							backgroundColor: '#E9EEF3'
						}
					}
				},
				legend: {
					data: this.list
				},
				
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						data: this.last
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: this.list[0],
						type: 'line',
						stack: 'Total',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: this.lest[0].data
					},
					{
						name: this.list[1],
						type: 'line',
						stack: 'Total',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: this.lest[1].data
					},
					{
						name: this.list[2],
						type: 'line',
						stack: 'Total',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: this.lest[2].data
					},
					{
						name: this.list[3],	
						type: 'line',
						stack: 'Total',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: this.lest[3].data
					},
					{
						name: this.list[4],
						type: 'line',
						stack: 'Total',
						label: {
							show: true,
							position: 'top'
						},
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: this.lest[4].data
					}
				]
			}
			chart.setOption(option)
		},
	}
</script>

<style scoped lang="scss">
	.box{
		width: 1000px;
		height: 862px;
		padding: 20px;
		.chartBox{
			width: 958px;
			height: 590px;
			box-shadow: 3px 3px 3px 3px #c8c8c8;
			margin-top: 10px;
			padding: 20px;
			.chart {
				width: 830px;
				height: 550px;
			}
		}	
	}
</style>